<?php
if (!isset($___MEDIA__SIMPLE__UPLOAD__TPL__INCLUDE)) {
    $___MEDIA__SIMPLE__UPLOAD__TPL__INCLUDE = true;
    ?>
    <!-- 确保只加载一次 -->
    <style>
        .simple-up-container .tip {
            padding-left: 10px;
            color: #777;
        }
    </style>
    <?php
}
?>
<div class="simple-up-container <?php echo $__s_up_className; ?>">
    <div class="">
        <!-- 浏览按钮 -->
        <button type="button" class="layui-btn" id="<?php echo $__s_up_id; ?>"
                style="<?php echo $__s_up_btn == 'false' ? "display:none;" : "" ?>">
            <?php echo $__s_up_content; ?>
        </button>
        <span class="tip">
            <?php echo $__s_up_tip; ?>
        </span>
    </div>
    <!-- 上传预览 -->
    <div class="layui-upload-list">
        <img class="layui-upload-preview" id="<?php echo $__s_up_id; ?>_preview"
             src="__IMAGES__/blank.png"
             style="width: <?php echo $__s_up_width; ?>;
                     height: <?php echo $__s_up_height; ?>;
                     border: solid 1px #e6e6e6;
                     cursor: pointer;"
        />
        <input type="hidden" value="<?php echo $__s_up_value; ?>"
               data-type="<?php echo $__s_up_type; ?>"
               id="<?php echo $__s_up_id; ?>_val"
               name="<?php echo $__s_up_field; ?>"
        />
        <div id="<?php echo $__s_up_id; ?>_upload_tip" style="
                width: <?php echo $__s_up_width; ?>;
                position: absolute;
                height: <?php echo $__s_up_height; ?>;
                line-height: <?php echo $__s_up_height; ?>;
                margin-top: -<?php echo $__s_up_height; ?>;
                color: #757575;
                cursor: pointer;
                text-align: center;
        <?php echo ($__s_up_value || $__s_up_btn != 'false') ? 'display:none;' : '' ?>
                "><?php echo $__s_up_content; ?></div>
        <div id="<?php echo $__s_up_id; ?>_clear" style="
                cursor: pointer;
                position: absolute;
                margin-top: calc(-<?php echo $__s_up_height; ?> - 8px);
                margin-left: calc(<?php echo $__s_up_width; ?> - 8px);
                background: #000;
                height: 16px;
                line-height: 16px;
                width: 16px;
                text-align: center;
                border-radius: 50%;
                color: #fff;
        <?php echo $__s_up_value ? '' : 'display:none;' ?>
                ">
            <i class="layui-icon layui-icon-close" style="font-size: 12px;"></i>
        </div>
    </div>
</div>

<script>
    layui.use('upload', function () {
        var $ = layui.jquery;
        var upload = layui.upload;
        var accept = '<?php echo $__s_up_type; ?>';
        var acceptMime = "*";
        switch (accept) {
            case 'images':
            case 'image':
                accept = 'images';
                acceptMime = "image/*";
                break;
            case 'video':
                acceptMime = 'video/*';
                break;
            case 'audio':
            case 'voice':
                accept = 'audio';
                acceptMime = 'audio/*';
                break;
        }
        upload.render({
            elem: '#<?php echo $__s_up_id; ?>',
            url: '/core/file/upload',
            size: <?php echo $__s_up_maxsize; ?>,
            accept: accept,
            acceptMime: acceptMime,
            before: function (obj) {
            },
            done: function (res) {
                //如果上传失败
                if (res.code == 0 || !res.data || !res.data.fileUrl) {
                    return layer.msg(res.msg);
                }
                var id = "<?php echo $__s_up_id; ?>";
                var fileUrl = res.data.fileUrl;
                //上传成功
                g.up.set(id, fileUrl);
                var onSuccess = '<?php echo $__s_up_success; ?>';
                if (onSuccess != '') {
                    //执行上传成功回调
                    eval("(" + onSuccess + ")")
                }
            },
            error: function () {
                layer.msg("上传失败");
            }
        });

        // 点击图片也能够上传
        $('#<?php echo $__s_up_id; ?>_preview').click(function () {
            var url = g.up.get("<?php echo $__s_up_id; ?>");
            if ($('#<?php echo $__s_up_id; ?>').is(":hidden") || !url) {
                $('#<?php echo $__s_up_id; ?>').click();
            } else {
                g.up.showPreview("<?php echo $__s_up_id; ?>");
            }
        });
        // 点击上传提示，直接选择文件上传
        $("#<?php echo $__s_up_id; ?>_upload_tip").click(function () {
            $('#<?php echo $__s_up_id; ?>').click();
        });
        // 清除已选择
        $("#<?php echo $__s_up_id; ?>_clear").click(function () {
            g.up.clear('<?php echo $__s_up_id; ?>');
        });
        //初始化
        var val = "<?php echo $__s_up_value; ?>";
        if (val) {
            g.up.set('<?php echo $__s_up_id; ?>', val);
        }
    });
</script>

<?php
if (!isset($__SIMPLE_UPLOAD_INCLUDE)) {
    $__SIMPLE_UPLOAD_INCLUDE = true;
    ?>
    <script>
        g.up = {
            get: function (id) {
                return $("#" + id + "_val").val();
            },
            getType: function (id) {
                return $("#" + id + "_val").attr("data-type");
            },
            set: function (id, url) {
                $("#" + id + "_val").val(url);
                var type = $("#" + id + "_val").attr("data-type");
                if (type == 'images' || type == 'image') {
                    $("#" + id + "_preview").attr("src", url);
                } else {
                    $("#" + id + "_preview").attr("src", "__IMAGES__/file_" + type + ".png");
                }
                $("#" + id + "_upload_tip").hide();
                $("#" + id + "_clear").show();
            },
            clear: function (id) {
                $("#" + id + "_val").val("");
                $("#" + id + "_preview").attr("src", "__IMAGES__/blank.png");
                if ($("#" + id).is(":hidden")) {
                    $("#" + id + "_upload_tip").show();
                }
                $("#" + id + "_clear").hide();
            },
            showPreview: function (id) {
                var type = g.up.getType(id);
                var url = g.up.get(id);
                if (!url) {
                    layer.alert("尚未选择文件");
                    return;
                }
                if (type == "images" || type == 'image') {
                    layer.photos({
                        photos: {
                            "data": [{
                                "src": url,
                                "thumb": url
                            }]
                        }
                    });
                } else if (type == 'video') {
                    layer.open({
                        content: '<video src="' + url + '" controls="controls" style="width: 100%;"></video>',
                        area: ['80vw', '80vh']
                    });
                } else if (type == 'audio') {
                    layer.open({
                        content: '<audio src="' + url + '" controls="controls" style="width: 100%;"></audio>',
                        area: ['80vw']
                    });
                } else {
                    layer.open({
                        content: '<a href="' + url + '" target="_blank">点击下载文件</a>'
                    });
                }
            }
        };
    </script>
    <?php
}
?>
